<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import myAxios from "@/plugins/myAxios.js";
import { Toast } from "vant";
import UserTagList from "../components/UserTagList.vue";
import { byTagsPageQueryUser } from '../services/pageQuery/UserPageQuery.js'
const route = useRoute();
const router = useRouter();
// 查询到的用户列表，默认为空数组
let userList = ref([]);
let { tags } = route.query;
// 当前页码，每页页数，总记录数
let pageNum = ref(1);
const pageSize = 4;
let total = ref();
onMounted(async () => {
    [userList.value, total.value] = await byTagsPageQueryUser(pageNum.value, pageSize, tags);
});
const pageChange = async() => {
    [userList.value, total.value] = await byTagsPageQueryUser(pageNum.value, pageSize, tags);
}
</script>
<template>
    <UserTagList :userList="userList"></UserTagList>
    <van-pagination
        @change="pageChange"
        v-if="userList && userList.length >= 1"
        v-model="pageNum"
        :total-items="total"
        :show-page-size="3"
        :items-per-page="pageSize"
        force-ellipses
    />
</template>
<style scoped></style>
